<template>
  <div>
    <new-search-bar searchFixed="true" @search="startSearch" @cancel="startSearch"></new-search-bar>
    <div class="c-ph24">
      <div @click="clickGoWordDetail(item.dId)" class="c-flex-row c-pv24 c-bd-b1" v-for="(item,index) in wordList" :key="index">
        <div class="c-ww180 c-maxh180 c-minh120 c-text-hidden c-br12">
          <img class="c-w100 c-h imgCloseBig" alt :src="$addXossFilter(item.poster, require('../../../assets/defult270.png'))">
        </div>
        <div class="c-flex-column c-pl20 c-flex-grow1 c-w0 c-pv4 c-justify-sb">
          <div class="c-fs24 c-text-ellipsis2 c-fc-xblack">{{item.name}}</div>
          <div class="c-flex-row c-aligni-center c-justify-sb">
            <div class="c-fs24 theme-fc">
              <span v-if="item.price * 1 > 0" class="c-fs24">{{'￥' | iosPriceFilter}}</span>
              <span>{{item.price * 1 > 0 ? item.price : '免费'}}</span>
            </div>
            <div class="c-fs20 c-fc-gray">{{item.orderCount}}人使用</div>
          </div>
        </div>
      </div>
    </div>
    <loading-status-tem :dataStatus="dataStatus" :noDataText="'暂无数据'"></loading-status-tem>
    <nav-bottom-bar :itemIndex="14" v-if="showNavBottomBar"></nav-bottom-bar>
  </div>
</template>

<script>
import loadingStatusTem from "@/components/templates/common/loadingStatusTem.vue";
import NavBottomBar from "@/components/templates/common/navBottomBar.vue";
import newSearchBar from "@/components/templates/common/newSearchBar.vue";
import { utilJs } from "@/utils/common.js";
let pageIndex = 1;
let LIMIT = 10;
export default {
  name: "wordList",
  components: {
    loadingStatusTem,
    NavBottomBar,
    newSearchBar
  },
  props: [],
  data() {
    return {
      theme: localStorage.getItem("colorName")
        ? localStorage.getItem("colorName")
        : "mb5_default",
      themeName: localStorage.getItem('themeName') ? localStorage.getItem('themeName') : 'mb5',
      dataStatus: "HAS_MORE_DATA",
      wordList: [],
      showNavBottomBar: false,
      companyAuth: JSON.parse(localStorage.getItem("companyAuth")),
      isLoading: false,
      searchText: '',
    };
  },
  methods: {
    iosAppRouteChange(toPath) {
      if (utilJs.isIOSApp()) {
        window.webkit.messageHandlers.iosWechatRoute.postMessage(toPath);
      } else if (utilJs.isAndoridNewApp()) {
        let data = {
          path: toPath
        }
        window.androidWechatRoute.doAction(JSON.stringify(data))
      } else {
        this.$routerGo(this, "push", { path: toPath });
      }
    },
    startSearch(e) {
      this.searchText = e.searchValue;
      pageIndex = 1;
      this.wordList = [];
      utilJs.toPageScrollTop();
      this.getWordList();
    },
    getWordList() {
      if (this.dataStatus == "LOADING") {
        return;
      }
      this.dataStatus = "LOADING";
      utilJs.getMethod(
        global.apiurl + "dictionary?search=" + this.searchText + "&page=" + pageIndex + "&limit=" + LIMIT,
        res => {
          if (pageIndex == 1) {
            this.wordList = res.data;
          } else {
            this.wordList = [...this.wordList, ...res.data];
          }
          if (res.data && (res.data.length < LIMIT)) {
            this.dataStatus = pageIndex == 1 && res.data.length == 0 ? "NO_DATA" : "NO_MORE_DATA";
          } else {
            this.dataStatus = "HAS_MORE_DATA";
            pageIndex++;
          }
        },
        failRes => {
          this.dataStatus = "DATA_ERROR";
        }
      );
    },
    //分享
    wechatShare: function () {
      let title = "词典";
      let shareImg = window.localStorage.getItem("shareLogo");
      let shareUrl =
        window.location.href.split("#")[0] +
        "#/homePage/word/wordList?&refereeId=" +
        localStorage.getItem("userId");

      let shareDesc = "点击查看详情";
      utilJs.wechatConfig(shareUrl, title, shareImg, shareDesc);
    },
    //手机端分享
    appShare: function () {
      let title = "词典";
      let shareImg = window.localStorage.getItem("shareLogo");
      let shareUrl =
        window.location.href.split("#")[0] +
        "#/homePage/word/wordList?&refereeId=" +
        localStorage.getItem("userId");

      let shareDesc = "点击查看详情";
      utilJs.appShareTrue(title, shareImg, shareUrl, shareDesc);
    },
    clickGoWordDetail(dId) {
      let toPath = `/homePage/word/wordDetail?dId=${dId}`;
      this.iosAppRouteChange(toPath);
    },
    windowScrollFunction() {
      utilJs.handleLoading(() => {
        if (this.dataStatus == "HAS_MORE_DATA" && this.wordList.length > 0) {
          this.getWordList();
        }
      });
    },
    initData() {
      pageIndex = 1;
      this.dataStatus = "HAS_MORE_DATA";
      this.getWordList();
      this.wordList = [];
    }
  },
  activated() {
    setDocumentTitle("词典列表"); // eslint-disable-line
    this.initData();
    this.wechatShare();
    window.addEventListener("scroll", this.windowScrollFunction);
    if (this.companyAuth.companyNav && this.companyAuth.companyNav.length > 0) {
      let arrWordFilter = this.companyAuth.companyNav.filter((item) => {
        return item.navType == 14;
      });
      this.showNavBottomBar = arrWordFilter.length > 0;
    }
  },
  deactivated() {
    this.dataStatus = "NO_MORE_DATA";
    window.removeEventListener("scroll", this.windowScrollFunction);
  }
};
</script>


<style scoped>
</style>
